<template>
	<!-- <div class="tc_box"> -->
			<div class="tc">
				<p class="title">{{activename.name}}</p>
				<span class="tc_title">科目</span>
				<div class="list">
					<a v-for="item of km_sx.datas" :key="item.id" :class="{active:actives==item.id}" @click="actives=item.id">
						{{item.name}}
					</a>
				</div>
				<div class="bottom">
					<a @click="sxCancelBtn">重置</a>
					<a class="sure" @click="sxSureBtn">确定</a>
				</div>
			</div>
	<!-- </div> -->
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'project_tc',
		data() {
			return {
				actives: "",
				km_sx:Object,
				activename:""
			}
		},
		methods: {
			getProject(){
				axios.get('/api/km_sx.json')
					.then(this.getProjectSuc)
					.catch(err=>{
						console.log(err)
					})
			},
			getProjectSuc(res){
				this.km_sx=res.data.data[0]
				this.activename = res.data.data[0].project
			},
			sxSureBtn() {
				if (!this.actives) {
					this.$layer.msg("请选择科目！");
					return false
				} else {
					this.$emit('sxSure',this.actives)
				}
			},
			sxCancelBtn(){
				this.$emit('sxCancel')
			}
		},
		mounted(){
			this.getProject()
			this.actives = this.$route.query.km
		}
	}
</script>

<style>
	.tc_box {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
		z-index: 2;
	}

	.tc {
		width: 78%;
		background: #FFFFFF;
		height: 100%;
		right: 0px;
		position: absolute;
		z-index: 7;
	}

	.tc .title {
		font-size: .32rem;
		color: #333;
		border-bottom: 1px solid #DDDDDD;
		padding: .5rem .3rem .25rem;
		text-align: left;
	}

	.tc .tc_title {
		font-size: .28rem;
		color: #333;
		padding: .25rem .3rem;
		text-align: left;
		display: block;
	}

	.tc .list {
		padding: 0 .3rem;
		text-align: left;
	}

	.tc .list a {
		display: inline-block;
		background: #F7F7F7;
		border-radius: 4px;
		font-size: .28rem;
		color: #333;
		text-align: center;
		width: 30%;
		margin: .2rem 3% .1rem 0;
		line-height: .7rem;
		overflow: hidden;
		height: .7rem;
	}

	.tc .list a.active {
		background: #057BDF;
		color: #fff;
	}

	.bottom {
		position: absolute;
		bottom: .7rem;
		padding: 0 .3rem;
		width: calc(100% - .6rem);
	}

	.bottom a {
		width: 41%;
		display: inline-block;
		text-align: center;
		background: #DBEEFF;
		color: #067BDF;
		line-height: .7rem;
		border-radius: 4px;
	}

	.bottom a.sure {
		background: linear-gradient(0deg, rgba(5, 123, 223, 1) 0%, rgba(45, 155, 249, 1) 100%);
		color: #fff;
		margin-left: 2%;
	}
</style>
